<template>
  <div class="">
    <section>
      <span
        v-for="(item, index) in list1"
        :key="index"
        @click="cutTab(index)"
        :class="{ acitve: $store.state.cutIndex == index }"
        >{{ item }}</span
      >
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
    };
  },
  created() {
      this.list1 = this.$store.state.list
    // console.log(this.$store);
  },
  mounted() {},
  methods: {
      cutTab(val){
        //   this.cutIndex = val
        // this.$emit('cutTab',val);
        // this.$store.state.cutIndex = val;
        // console.log(this.$store.state);
        this.$store.commit('getIndex', val);
      }
  },
  components: {},
};
</script>

<style lang='scss'>
section {
  background: #ccc;
}
span {
  display: inline-block;
  padding: 10px 20px;
}
.acitve {
  background: #fff;
}
</style>
